<style lang="scss" scoped>
	.pmarketing {
		@include n-col1;
		align-items: stretch;

		.pmarketing-list {
			height: 0;
			flex: 1;
			display: grid;
			grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
			//grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: 160px;
			gap: 30px;

			>li {
				border-radius: 20px;
				background: $theme-bg-white1;

			}

			.pmarketing-list-card {
				padding: 21px;
				@include n-col2;
				align-items: flex-start;

				>img {
					height: 73px;
					border-radius: 18px;
				}

				>h3 {
					margin-top: 10px;
					font-size: 18px;
					color: $theme-text2;
					line-height: 1;
				}

				>p {
					font-size: 13px;
					margin-top: 17px;
					color: $theme-text5;
					line-height: 1;
				}
			}
		}
	}
</style>

<template>
	<div class="n-page pmarketing" v-loading="loading">
		<h1 class="n-page-h1">
			<em>{{ $route.meta.title }}</em>
			<!--			<el-button icon="el-icon-plus" type="primary" >添加文件夹</el-button>-->
		</h1>
    <h3 style="color:#999">所有工具仅用于市场问卷调查</h3>
		<ul class="pmarketing-list">
			<li class="pmarketing-list-card" @click="gokeywords()">
				<img style="filter:  hue-rotate(200deg);" src="@/assets/img/tiktok.jpg" />
				<h3>关键词分析</h3>
<!--				<p></p>-->
			</li>
			<li class="pmarketing-list-card" @click="godata()">
				<img style="filter:  hue-rotate(200deg);" src="@/assets/img/tiktok.jpg" />
				<h3>某音直播监控工具</h3>
<!--				<p></p>-->
			</li>
			<li class="pmarketing-list-card">
				<img src="@/assets/img/RedNote.webp" />
				<h3>某书工具(开发中)</h3>
<!--				<p>开发中，未上线</p>-->
			</li>
      <li class="pmarketing-list-card">
				<img src="@/assets/img/quanwang.webp" />
				<h3>全网获客(开发中)</h3>
<!--				<p>开发中，未上线</p>-->
			</li>
		</ul>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
			}
		},
		mounted() {

		},
		computed:{
			userInfo(){
				return this.$store.userInfo || {}
			}
		},
		beforeDestroy() {},
		methods: {
			verif(){
				if(!this.$auth.isLogin()) {
					this.$msg('请登录',2)
					this.$router.push(`/login?redirect=${ this.$route.fullPath }`)
					return false
				}
				const {type} = this.userInfo;
				
				if(type === 2) return (this.$msg('请开通会员',2),false);
				
				return true;
			},
			gokeywords() {
				if(this.verif()) this.$router.push('/pages/live-analysis/keyword')
			},
			godata() {
				if(this.verif()) this.$router.push('/pages/live-analysis/data')
			}
		},
	}
</script>
